<template>
  <div>
    <div
      id="myChart1"
      :style="{
        width: '400px',
        height: '400px',
        margin: '10px',
        float: 'left',
      }"
    ></div>
    <div
      id="myChart2"
      :style="{
        width: '400px',
        height: '400px',
        margin: '10px',
        float: 'left',
      }"
    ></div>
    <div
      id="myChart3"
      :style="{
        width: '400px',
        height: '400px',
        margin: '10px',
        float: 'left',
      }"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info1: [],
      newArrayday: [],
      newArraynum: [],
      sellinfo: [],
      sellname: [],
      sellvalue: [],
    };
  },
  created: function () {
    this.$axios
      .get("visits")
      .then((res) => {
        if (res.data.statusCode == 200) {
          this.info1 = res.data.info;
          //console.log(res.data.info);
          var j1 = 0;
          var j2 = 0;
          for (let i in this.info1) {
            this.newArrayday[j1++] = this.info1[i].DAY;
            this.newArraynum[j2++] = this.info1[i].count;
          }
          //console.log(this.newArrayday.reverse());
          //console.log(this.newArraynum.reverse());
          this.draw();
        }
      })
      .catch((error) => {
        console.log(error);
      });
    this.$axios
      .get("sells")
      .then((res) => {
        if (res.data.statusCode == 200) {
          this.sellinfo = res.data.info;
          this.draw2();
        }
      })
      .catch((error) => {
        console.log(error);
      });
    this.$axios
      .get("sellday")
      .then((res) => {
        if (res.data.statusCode == 200) {
          this.sellvalue = res.data.info[1];
          this.sellname = res.data.info[0];
          this.draw3();
        }
      })
      .catch((error) => {
        console.log(error);
      });
  },
  //钩子函数
  mounted() {
    this.draw();
    this.draw2();
    this.draw3();
  },
  methods: {
    draw() {
      // 初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart1"));
      // 绘制图表
      var option = {
        //此处占用篇幅过大，先省略等下会进行解释
        title: {
          text: "近十日访问量",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          data: this.newArrayday.reverse(),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.newArraynum.reverse(),
            type: "line",
            smooth: true,
          },
        ],
      };
      //防止越界，重绘canvas
      window.onresize = myChart.resize;
      myChart.setOption(option); //设置option
    },
    draw2() {
      // 初始化echarts实例
      let myChart2 = this.$echarts.init(document.getElementById("myChart2"));
      // 绘制图表
      var option = {
        title: {
          text: "销售分布",
          //subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: this.sellinfo,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      //防止越界，重绘canvas
      window.onresize = myChart2.resize;
      myChart2.setOption(option); //设置option
    },
    draw3() {
      // 初始化echarts实例
      let myChart3 = this.$echarts.init(document.getElementById("myChart3"));
      // 绘制图表
      var option = {
        title: {
          text: "销售额",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          data: this.sellname,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.sellvalue,
            type: "bar",
            itemStyle: {
              normal: {
                color: "#FD6B71", //设置柱子颜色
                label: {
                  show: true, //柱子上显示值
                  position: "top", //值在柱子上方显示
                  textStyle: {
                    color: "#0e9fdf", //值得颜色
                  },
                },
              },
            },
          },
        ],
      };
      //防止越界，重绘canvas
      window.onresize = myChart3.resize;
      myChart3.setOption(option); //设置option
    },
  },
};
</script>
<style scoped>
</style>